<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>circle</title>

		<style type="text/css">
			#myCanvas {}

			.div1 {
				position: relative;
			}

			.canvas {
				position: absolute;
				top: 25px;
				z-index: 1;
				left: 25px;
				/* width: 200px; */
				/* border: 1px solid #d3d3d3; */
				/* height: 200px; */
			}

			img {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body style="background:#000">
		<div class="div1">
			<img src="./image/light_img.png" />
			<canvas class="canvas" id="myCanvas"></canvas>
		</div>
		<script>
			// 占比10%
			var precent = 0.4;
			var i = 1- precent ;
			var jiaodu = -90+360*precent
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.lineWidth = 26;
			ctx.beginPath();
			ctx.translate(75, 75);
			ctx.rotate(jiaodu * Math.PI / 180);
			ctx.strokeStyle = "rgba(0,4,61,0.9)";
			ctx.arc(0, 0, 55, 0, 2 * Math.PI * i);
			ctx.globalAlpha = 0.9 ; // 调
			ctx.stroke();
		</script>

	</body>
</html>
